<template>
  <div class="nav flex_box">
    <img src="@/assets/img/indexLogo.6f8ac4f0.png" alt="" />
    <ul class="nav-list flex_box">
      <li
        v-for="item in navList"
        :key="item.path"
        :class="item.path.indexOf($route.path) >= 0 ? 'current' : ''"
        @click="handlePush(item.path)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="search flex_box">
      <input type="text" placeholder="输入关键词" />
      <div class="flex_box">
        <img src="@/assets/img/search.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          name: "首页",
          path: "/home",
        },
        {
          name: "全部商品",
          path: "/allProducts?comeType=all",
        },
        {
          name: "个人中心",
          path: "/personCenter",
        },
        {
          name: "我的订单",
          path: "/myOrder",
        },
        {
          name: "专属福利",
          path: "/welfare",
        },
      ],
    };
  },
  methods: {
    handlePush(path) {
      if (this.$store.state.login.loginState) {
        this.$router.push(path);
      } else {
        this.$store.commit("login/showLoginModal", true);
        this.$store.commit("login/modifyBeforeLoginedPushPath", path);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.flex_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav {
  width: 1200px;
  height: 72px;
  margin: 14px auto 33px;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 16px;
  img {
    cursor: pointer;
  }
}
.nav-list,
.search {
  height: 40px;
}
.nav-list {
  line-height: 40px;
  font-weight: 600;
  cursor: pointer;
  & > li + li {
    margin-left: 40px;
  }
}
.current {
  color: #0a328e;
}
.search {
  input {
    width: 180px;
    height: 38px;
    padding: 0px 20px;
    border: 1px solid #dedede;
    border-radius: 20px 0px 0px 20px;
    outline: none; /* 光标键入时的边框样式修改 */
  }
  & > div:last-child {
    padding-right: 8px;
    width: 50px;
    height: 40px;
    background: #0a328e;
    border-radius: 0px 20px 20px 0px;
    cursor: pointer;
  }
}
</style>